<template>
  <div id="app">
    <h2>自律一下</h2>
    <input type="text" v-model="newTodoTitle" @keyup.enter="add" laceholder="添加新的待办事项">
    <button @click="add">添加</button>
    <div v-for="(todo, index) in todos" :key="index">
      <TodoItem :title="todo.title" :completed="todo.completed" @update:completed="updateTodoCompleted(todo)"
        @remove-todo="removeTodo(index)" />
    </div>
  </div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'

export default {
  name: 'App',
  data() {
    return {
      todos: [],
      newTodoTitle: ''
    }
  },
  components: {
    TodoItem
  },
  methods: {
    add() {
      this.todos.push({ title: this.newTodoTitle, completed: false });
      this.newTodoTitle = '';
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    },
    updateTodoCompleted(todo) {
      return () => {
        todo.completed = !todo.completed;
      };
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
